<template>

    <div class="container">
      <!-- 头部 -->
      <header class="header">
        <!-- 头部的第一行 -->
        <div class="top">
          <div class="container">
            <div class="loginList">
              <p>xx酒店欢迎您！</p>
              <p>
                <span>请</span>
                <router-link to="/userlogin" class="login">登录</router-link>
                <router-link  class="register" to="/userReg">免费注册</router-link>
              </p>
              <p>
                <!-- 名字 -->
                {{  }}
              </p>
            </div>
            <div class="typeList">
               <router-link to="/my-order">我的订单</router-link>
              <a href="###">我的购物车</a>
              <a href="###">商家后台</a>
            </div>
          </div>
          <div class="menu-item">
            <div class="logo">
              <img src="./images/hotel-logo.png" alt="">

            </div>
            <ul>
              <li> <router-link to="/home">首页</router-link></li>
              <li> <router-link to="/hotel-book">酒店预订</router-link></li>
              <li><router-link to="/hotel-news">新闻中心</router-link></li>
              <!-- <li><router-link to="/user-message">客户留言</router-link></li> -->
              <li><router-link to="/about-us">关于我们</router-link></li>
            </ul>

          </div>

        </div>

      </header>

    </div>

</template>

<script>
export default {
  name: 'HotelSystemIndex',

  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
.header {
  width: 1200px;
  margin: 0 auto;

  opacity: 0.9;
 overflow: hidden;

  &>.top {
      background-color: #eaeaea;
      height: 30px;
      line-height: 30px;
      // color: white;

      .container {
          width: 1200px;
          margin: 0 auto;
          overflow: hidden;
          // color: white;

          .loginList {
              float: left;

              p {
                  float: left;
                  margin-right: 10px;
                .login {
                  color: red;
                  margin-left: 3px;
                }
                  .register {
                      border-left: 1px solid #b3aeae;
                      padding: 0 5px;
                      margin-left: 5px;
                      color: red;
                  }
              }
          }

          .typeList {
              float: right;

              a {
                  padding: 0 10px;

                  &+a {
                      border-left: 1px solid #b3aeae;
                  }
              }

          }

      }

      .menu-item {
          // margin-top: 20px;
          // background-color: pink;
          height: 64px;
          max-width: 1200px;
          margin: 0 auto;
          background-color: #eaeaea;
          // line-height: 100px;
          position: sticky;

          .logo {

              img {
                  float: left;
                  width: 70px;
                  height: 70px;
              }
          }

          ul {
              float: right;
              display: flex;
              justify-content: center;
              align-items: center;
              height: 64px;
              margin-right: 60px;

              li {
                  cursor: pointer;
                  white-space: nowrap;
                  box-sizing: border-box;
                  margin: 0 40px;

                  a {
                      display: block;
                      height: 20px;
                      text-decoration: none;
                      font-size: 20px;
                      padding-bottom: 28px;
                  }

                  a:hover {
                      color: #519df2;
                      text-decoration: none;
                      border-bottom: 3px solid #029df2;

                  }
              }
          }

      }
  }
}

</style>
